<template>
    <div>
        <p :class="isActive ? 'active' : ''">demo</p>
        <p :class="[activeClass, errorClass, {active: isActive}]">demo</p>
        <p :class="obj">demo</p>
        <p :class="{active: isActive, done: isDone}">demo</p>
    </div>
</template>

<script setup>
    import { ref, reactive } from 'vue'
    const isActive = ref(true)
    const isOk = ref(true)
    const isDone = ref(true)
    const obj = reactive({
        active: isActive,
        done: isDone,
        ok: isOk
    })
    const activeClass = 'activeClass'
    const errorClass = 'errorClass'
</script>

<style scoped>
    .active {
        color: purple;
    }
</style>